<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>聊天气泡</title>
		<style>
			#window{
				width:300px;
				height:300px;
				border:2px solid;
				display:flex;
				justify-content:flex-end;
			}
			#frame{
				height:30px;
				font-size:15px;
				line-height:30px;
				padding-left:15px;
				padding-right:15px;
				padding-bottom:2px;
				padding-top:2px;
				border-radius:5px;
				background-color:green;
				color:white;
			}
			#triangle{
				margin-left:80%;
				height:0;
				width:0;
				border-top:20px solid green;
				border-left: 10px solid transparent;
				border-right: 10px solid transparent;
				transform: skew(45deg);
			}
			#bubble{
				margin-top:5px;
				display:flex;
				flex-direction: column;
				margin-right: 10px;
			}
		</style>
	</head>
	<body>
		<div id="window">
			<div id="bubble">
				<div id="frame">Hello World!</div>
				<div id="triangle"></div>
			</div>
		</div>
	</body>
</html>